<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>停车缴费</title>
    <style>
        body {
            margin: 0;
            background-color: #eee;
            box-sizing: border-box;
        }

        .chunk {
            border: solid 1px #eee;

            display: flex;
            padding: 15px 10px;

        }

        .chunk-left {
            width: 40%;
            line-height:40px;
        }

        .chunk-right {
            width: 60%;
            display: flex;
            justify-content: space-between;
            color: rgb(174, 175, 175);
        }

        .confirmBtn {
            width: 98%;
            height: 50px;
            line-height: 50px;
            background-color: #0066ff;
            text-align: center;
            margin: 30px auto;
            color: white;
            border-radius:5px;
            border:0px solid #ccc
        }



        .shade {
            background-color: rgba(78, 77, 77, 0.2);
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
        }

        .shade-white {
            width: 100%;
            height: 60vw;
            background-color: white;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .shade-header {
            display: flex;
            /* width: 100%; */
            justify-content: space-between;
            padding: 15px 10px;
        }
        .select{
            width:100%;
            height:100%;
            font-size:16px;
            border:0px solid #000;
            height:40px;

        }
        .input{
            font-size:16px;
            border:0px solid #000;
            height:28px
        }


        .clearfix:after {
            content: ".";
            display: block;
            font-size: 0;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            display: inline-table;
        }
        .clearfix {
            display: block;
        }

        .che_tit {
            text-align: center;
            padding: 20px;
        }

        .ul_pro {
            background-color: #CED3D9;
            text-align: center;
            padding: 4px 2px;
            font-size: 14px;
        }

        .ul_pro li {
            float: left;
            width: 11.11%;
            padding: 2px;
            box-sizing: border-box;
            list-style:none;
        }

        .ul_pro .li_close {
            float: right;
            width: 22.22%;
        }

        .ul_pro .li_close span {
            background-color: #ACB3BB;
        }

        .ul_pro .li_clean {
            float: right;
            width: 22.22%;
        }

        .ul_pro li span {
            display: block;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #888888;
            /* max-width:48px; margin:0 auto; */
            line-height: 32px;
            padding-top: 2px;
        }

        .ul_pro li span:active {
            background-color: #4DA9F2;
            color: #fff;
            list-style:none;
        }

        .ul_input {
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 0px;
            width: 400px;
            margin: 0 auto;
        }

        .ul_input li {
            float: left;
            width: 12.5%;
            /* padding: 2px; */
            text-align: center;
            list-style:none;
        }

        .ul_input li span {
            display: flex;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 40px;
            margin: 0 auto;
            height: 40px;
            line-height: 40px;
            justify-content: center;
            /* text-align: center; */
            /* margin: 0 auto; */
            /* flex-wrap: wrap; */
        }

        .ul_keybord {
            background-color: #CED3D9;
            text-align: center;
            padding: 4px 2px;
            font-size: 14px;
        }

        .ul_keybord li {
            float: left;
            width: 10%;
            padding: 2px;
            box-sizing: border-box;
            list-style:none;
        }

        .ul_keybord .ikey20 {
            margin-left: 5%;
        }

        .ul_keybord .li_w {
            width: 11.11%;
        }

        .ul_keybord .li_close {
            float: right;
            width: 22.22%;
        }

        .ul_keybord .li_close span {
            background-color: #ACB3BB;
        }

        .ul_keybord .li_clean {
            float: right;
            width: 22.22%;
        }

        .ul_keybord li span {
            display: block;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #888888;
            /* max-width:48px; margin:0 auto; */
            line-height: 32px;
            padding-top: 2px;
        }

        .ul_keybord li span:active {
            background-color: #4DA9F2;
            color: #fff;
        }

        #park-timekeeping{
            margin: 0 auto;
            width: 60%;
            height: 40px;
            border-radius: 3px;
            background-color: #4DA9F2;
            color: white;

        }
        .new-energy span{
            font-size: 13px ;
            line-height: 18px !important;
        }
    </style>
    <link href="/static/admin/css/layer.css" type="text/css" rel="styleSheet" id="layermcss">
</head>

<body>
<div style="height:160px">
    <img src="/static/img/ali.png" style="width:100%;height:100%"/>
</div>

<form action="{:url('couponparkpay')}" method="get" onsubmit="return checkform()">
    <div style="margin-top:0px">




        <div style="text-align:center;border: solid 1px #eee;background-color: white;padding: 15px 10px;">
            请输入车牌
        </div>

        <!--<div class="chunk" >
            <div class="chunk-left">车牌</div>
            <div class="chunk-right" >
            </div>
        </div>-->

        <div class="car_input" data-pai="" style="width:100%">
            <ul class="clearfix ul_input" style="width:100%">
                <li class="input_pro"><span></span></li>
                <li class="input_pp input_zim"><span></span></li>
                <li class="input_pp"><span></span></li>
                <li class="input_pp"><span></span></li>
                <li class="input_pp"><span></span></li>
                <li class="input_pp"><span></span></li>
                <li class="input_pp"><span></span></li>
                <li class="input_pp new-energy-input" style="display: none;"><span></span></li>
                <li class="new-energy"><span>新能源</span></li>
            </ul>
        </div>
        <div id="a" style="display:none"></div>

        <input type="hidden"  class="input" required="required" name="car_number" id="car_number" style="height:40px"/>
        <input type="hidden" name="coupon_id" value="{$coupon_id}"/>
        <input type="hidden" name="parkingNo" value="{$parkingNo}"/>
        <div class="chunk">
            <input type="submit" class="confirmBtn" value="查询停车费"    style="margin:0 auto;"/>
        </div>
    </div>
</form>


<div id="layui-m-layer6" class="layui-m-layer layui-m-layer1" index="6">
    <div class="layui-m-layermain">
        <div class="layui-m-layersection">
            <div class="layui-m-layerchild  layui-m-anim-up" style="position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:0; border:none;">
                <div class="layui-m-layercont">
                    <div id="pro">
                        <ul class="clearfix ul_pro">
                            <li><span onclick="chooseProvince(this);">京</span></li>
                            <li><span onclick="chooseProvince(this);">沪</span></li>
                            <li><span onclick="chooseProvince(this);">浙</span></li>
                            <li><span onclick="chooseProvince(this);">苏</span></li>
                            <li><span onclick="chooseProvince(this);">粤</span></li>
                            <li><span onclick="chooseProvince(this);">鲁</span></li>
                            <li><span onclick="chooseProvince(this);">晋</span></li>
                            <li><span onclick="chooseProvince(this);">冀</span></li>
                            <li><span onclick="chooseProvince(this);">豫</span></li>
                            <li><span onclick="chooseProvince(this);">川</span></li>
                            <li><span onclick="chooseProvince(this);">渝</span></li>
                            <li><span onclick="chooseProvince(this);">辽</span></li>
                            <li><span onclick="chooseProvince(this);">吉</span></li>
                            <li><span onclick="chooseProvince(this);">黑</span></li>
                            <li><span onclick="chooseProvince(this);">皖</span></li>
                            <li><span onclick="chooseProvince(this);">鄂</span></li>
                            <li><span onclick="chooseProvince(this);">津</span></li>
                            <li><span onclick="chooseProvince(this);">贵</span></li>
                            <li><span onclick="chooseProvince(this);">云</span></li>
                            <li><span onclick="chooseProvince(this);">桂</span></li>
                            <li><span onclick="chooseProvince(this);">琼</span></li>
                            <li><span onclick="chooseProvince(this);">青</span></li>
                            <li><span onclick="chooseProvince(this);">新</span></li>
                            <li><span onclick="chooseProvince(this);">藏</span></li>
                            <li><span onclick="chooseProvince(this);">蒙</span></li>
                            <li><span onclick="chooseProvince(this);">宁</span></li>
                            <li><span onclick="chooseProvince(this);">甘</span></li>
                            <li><span onclick="chooseProvince(this);">陕</span></li>
                            <li><span onclick="chooseProvince(this);">闽</span></li>
                            <li><span onclick="chooseProvince(this);">赣</span></li>
                            <li><span onclick="chooseProvince(this);">湘</span></li>
                            <li class="li_close" onclick="closePro();"><span>关闭</span></li>
                            <li class="li_clean" onclick="cleanPro();"><span>清空</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="/static/admin/js/jquery.js"></script>
<script src="/static/admin/js/layer.js" type="text/javascript"></script>
<script src="/static/admin/js/index.js" type="text/javascript"></script>
<script type="text/javascript">
    var newEnergy = false;
    $(".new-energy").on("click",()=>{
        newEnergy = true;
    $(".new-energy").css("display","none");
    $(".new-energy-input").css("display","inline");
    })

    function checkform(){
        var car_number = $("#a").text();

        $("#car_number").val(car_number);
        console.log($("#car_number").val());
        if($("#a").text().length >= 7){
            return true;
        }else{
            alert("请输入正确车牌格式");
            return false;
        }
    }
</script>
